{% extends "base.html" %}
{% block title %}预约列表{% endblock %}
{% block head %}
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    {{ super() }}
    <style>
        .weui-cells__title {
            padding-left: 0;
        }

        .weui-well__content {
            border: none;
        }

        .weui-well__content.onlyBottomBorder {
            padding: 5px 0;
            margin: 5px 0;
            border-bottom: 1px solid #E6E6E6;
        }

        .weui-btn_mini {
            font-size: 12px;
            min-width: auto;
        }

        .weui-well__content > div:not(:last-child) {
            margin: 5px 0;
            padding: 5px 0;
            border-bottom: 1px solid #E6E6E6;
        }

        .text-gray {
            color: #555555;
        }

        .weui-loadmore {
            background: #ffffff;
            margin: 0;
            padding: 15px;
            width: auto;
        }

        .reservationTime {
            display: flex;
        }
    </style>
{% endblock %}
{% block body %}
    {#    {% if not showTitle %}#}
    {#        {% import "component/header.html" as header %}#}
    {#        {{ header.header(true,"预约列表","") }}#}
    {#    {% endif %}#}
    <div class="contianer">
        <div class="mine-page" style="overflow-y: hidden;">
            <div class="weui-flex" id="clinic_type_btnGroup">
                <div class="weui-flex__item">
                    <div class="btn-group">
                        <a href="javascript:void(0)" data-value="0" class="selected">未预约</a>
                        <a href="javascript:void(0)" data-value="1" class="">已预约</a>
                    </div>
                </div>
            </div>
            <div class="reservationList-page" style="overflow-x: hidden;top: 4em;">
                <div class="weui-pull-to-refresh__layer" style="padding:7px;">
                    <div class='weui-pull-to-refresh__arrow'></div>
                    <div class='weui-pull-to-refresh__preloader'></div>
                    <div class="down">下拉刷新</div>
                    <div class="up">释放刷新</div>
                    <div class="refresh">正在刷新</div>
                </div>

                <div id="reservation-list" style="top:3em;">
                </div>
                <div class="weui-infinite-scroll" style="display: none;">
                    <div class="infinite-preloader"></div>
                    <div class="weui-loadmore" style="margin: 0 auto">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    {{ super() }}
    <script type="text/javascript">

        var cacheDataList = null;
        var select_state = 0;
        var sheetList = [];//批量预约的申请单号
        var resIdList = [];//处理同一个预约的多个申请单号
        $("#clinic_type_btnGroup a").click(function () {
            $(this).parent().find(".selected").removeClass("selected");
            $(this).addClass("selected");
            select_state = $(this).attr("data-value");
            getReservationList();
        });

        $(function () {
            if (sessionStorage.getItem("res_list_state") != null) {
                select_state = parseInt(sessionStorage.getItem("res_list_state"));
                $("#clinic_type_btnGroup a.selected").removeClass("selected");
                $("#clinic_type_btnGroup a[data-value='" + select_state + "']").addClass("selected");
                sessionStorage.removeItem("res_list_state");
            }
            getReservationList();
            $(".reservationList-page").pullToRefresh({
                onRefresh: function () { /* 当下拉刷新触发的时候执行的回调 */
                    $("#reservation-list").empty();
                    getReservationList();
                    $(".reservationList-page").pullToRefreshDone();
                },
                onPull: function (percent) { /* 用户下拉过程中会触发，接收一个百分比表示用户下拉的比例 */
                },
                distance: 50 /* 下拉刷新的触发距离， 注意，如果你重新定义了这个值，那么你需要重载一部分CSS才可以，请参考下面的自定义样式部分 */
            });
            //禁止返回事件
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', function () {
                history.pushState(null, null, document.URL);
            });
        })

        function getReservationList() {
            $("#reservation-list").empty();
            $("#onkeyBDBtn").remove();
            resIdList = [];
            sheetList = [];
            $.showLoading();
            var params = {
                "select_state": select_state,
                "id": common.getQueryString("user_id"),
                "type": common.getQueryString("type")
            };
            $.post(navRoot + "/api/reservation/list", params, function (data) {
                if (data["code"] == 200) {
                    try {
                        if (data["data"]) {
                            var list = data["data"]["data"];
                            for (var i in list) {
                                var requestInfo = list[i];
                                var sheetId = requestInfo["SheetID"];
                                var resId = requestInfo["AppointNum"];//预约号

                                if (resId == "" || resIdList.indexOf(resId.replace("@", "-")) == "-1") {//如果是第一次出现该预约号
                                    if (resId != "") {
                                        resIdList.push(resId.replace("@", "-"));
                                    }

                                    if (sheetList.indexOf(sheetId) == "-1") {
                                        sheetList.push(sheetId);

                                        //设置标题
                                        if (!$("#reservation-list").data("patientInfo")) {
                                            $("#reservation-list").data("patientInfo", requestInfo['PatientName']);
                                            document.title = requestInfo['PatientName'] + "，" + requestInfo['PatientSexName'] + "，" + (requestInfo['PatientAge'] || "");

                                        }
                                        var stateName = select_state == 0 ? requestInfo["FeeStateName"] : requestInfo["CurrentStateName"];
                                        var typeItem = $('' +
                                            '<div class="weui-well weui-well_access resId' + resId.replace("@", "-") + '">' +
                                            '   <div class="weui-well__top weui-flex" style="display:none">' +
                                            '       <div class="font14 weui-flex__item reservationTime text-disabled">' +
                                            '预约时间：' + '</div>' +
                                            '       <div class="font12">' + requestInfo["AppointNum"] + '</div>' +
                                            '   </div>' +
                                            '   <div class="weui-well__content">' +
                                            '  <div class="sheetItem sheetId' + sheetId + '">' +
                                            '   <div class="weui-flex">' +
                                            '       <div class="font14 weui-flex__item inOrOutTime text-disabled">' +
                                            '           申请单号：' + requestInfo["SheetID"] + '</div>' +
                                            '       <div class="resfee_state font12 font-bold text-gray">' + stateName + '</div>' +
                                            '   </div>' +
                                            '       <div class="weui-cell weui-cell_access">' +
                                            '           <div class="weui-cell__bd">' +
                                            '               <div class="weui-flex">' +
                                            '                   <div class="weui-flex__item font-bold examBodyPart"></div>' +
                                            '               </div>' +
                                            '               <div class="font14">' + requestInfo["ExamDeptName"] + '</div>' +
                                            '           </div>' +
                                            '           <div class="weui-cell__ft"/>' +
                                            '       </div>' +
                                            '       <div class="weui-flex font12 text-disabled">' +
                                            '           <div class="weui-flex__item">开单医生：' + requestInfo["BillingDoctorName"] + '</div>' +
                                            '       </div>' +
                                            '       <div class="weui-flex font12 text-disabled">' +
                                            '           <div class="weui-flex__item">开单时间：' + requestInfo["BillingDate"] + " " + requestInfo["BillingTime"] + '</div>' +
                                            '       </div>' +
                                            '   </div>' +
                                            '  </div>' +
                                            '   <div class="weui-well__footer optionBtn weui-flex">' +
                                            '       <div class="weui-flex__item"></div>' +
                                            '   </div>' +
                                            '</div>'
                                        );
                                        var examBodyParts = "";
                                        for (var m = 0; m < requestInfo["RequestExamDtoList"].length; m++) {
                                            if (m == 0) {
                                                examBodyParts = "[" + requestInfo["RequestExamDtoList"][0]["ExamModality"] + "]" + requestInfo["RequestExamDtoList"][0]["ExamBodyPart"] + requestInfo["RequestExamDtoList"][0]["ExamMethod"];
                                            } else {
                                                examBodyParts += "<br>" + "[" + requestInfo["RequestExamDtoList"][m]["ExamModality"] + "]" + requestInfo["RequestExamDtoList"][m]["ExamBodyPart"] + requestInfo["RequestExamDtoList"][m]["ExamMethod"];
                                            }
                                        }
                                        typeItem.find(".examBodyPart").html(examBodyParts);
                                        var resSheetList = [];//相同预约号下面的申请单号列表
                                        resSheetList.push(sheetId);
                                        typeItem.data("resSheetList", resSheetList);

                                        var yuyueBtn = $("<button class=\"weui-btn weui-btn_mini\">预约</button>");
                                        var cancelBtn = $("<button class=\"weui-btn weui-btn_mini\">取消预约</button>");
                                        var changeBtn = $("<button class=\"weui-btn weui-btn_mini\">调整预约</button>");
                                        var baodaoBtn = $("<button class=\"weui-btn weui-btn_mini\">排队信息</button>");
                                        var reservationInfoBtn = $("<button class=\"weui-btn weui-btn_mini\">回执</button>");
                                        //预约
                                        yuyueBtn.data("data", requestInfo);
                                        yuyueBtn.click(function () {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            sessionStorage.setItem("res_list_scrollTop", $(".ccdList-page").scrollTop());
                                            sessionStorage.setItem("res_list_state", select_state);
                                            var res_id = $(this).data("data")["SheetID"];
                                            location.href = navRoot + "/reservation/datetime?type=hand&id=" + res_id;
                                        });
                                        //取消预约
                                        cancelBtn.data("data", requestInfo);
                                        cancelBtn.click(function () {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            var res_id = $(this).data("data")["SheetID"];
                                            var self = $(this);
                                            $.confirm({
                                                title: '取消预约',
                                                text: '是否取消此次预约！',
                                                onOK: function () {
                                                    //点击确认
                                                    var params = {
                                                        sheet_list: self.parents(".weui-well").data("resSheetList").join(",")
                                                    };
                                                    $.post(navRoot + "/api/res/cancel", params, function (data) {
                                                        select_state = 1;
                                                        $("#clinic_type_btnGroup a.selected").removeClass("selected");
                                                        $("#clinic_type_btnGroup a[data-value='" + select_state + "']").addClass("selected");
                                                        getReservationList();
                                                    }, "json")
                                                },
                                                onCancel: function () {
                                                }
                                            });
                                        });
                                        //调整预约
                                        changeBtn.data("data", requestInfo);
                                        changeBtn.click(function () {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            sessionStorage.setItem("res_list_scrollTop", $(".ccdList-page").scrollTop());
                                            sessionStorage.setItem("res_list_state", select_state);
                                            var res_id = $(this).parents(".weui-well").data("resSheetList").join(",");
                                            var res_date = $(this).data("data")["AppointDate"];
                                            var res_time = $(this).data("data")["AppointTime"];
                                            location.href = navRoot + "/reservation/datetime?id=" + res_id + "&date=" + res_date + "&time=" + res_time;
                                        });
                                        //报到
                                        baodaoBtn.data("data", requestInfo);
                                        baodaoBtn.click(function () {
                                            var requestInfo=$(this).data("data");
                                            event.preventDefault();
                                            event.stopPropagation();
                                            sessionStorage.setItem("res_list_scrollTop", $(".ccdList-page").scrollTop());
                                            sessionStorage.setItem("res_list_state", select_state);
                                            location.href = navRoot + "/baodao/queue?scheduleID="+requestInfo["AppointNum"];

                                        });
                                        //预约回执
                                        reservationInfoBtn.data("data", requestInfo);
                                        reservationInfoBtn.click(function () {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            sessionStorage.setItem("res_list_scrollTop", $(".ccdList-page").scrollTop());
                                            sessionStorage.setItem("res_list_state", select_state);
                                            var res_id = $(this).data("data")["AppointNum"];
                                            location.href = navRoot + "/reservation/huizhi?id=" + res_id
                                        });

                                        if (select_state == 0) {
                                            typeItem.find(".optionBtn").append(yuyueBtn);
                                        } else {
                                            var currentState = requestInfo["CurrentState"];
                                            //已预约且已报到前显示
                                            if (currentState == "1") {
                                                typeItem.find(".optionBtn").append(changeBtn);
                                            }
                                            //已报到显示
                                            if (currentState == "2") {
                                                typeItem.find(".optionBtn").append(baodaoBtn);
                                            }
                                            typeItem.find(".optionBtn").append(reservationInfoBtn);
                                            typeItem.find(".weui-cell__bd").append($('<div class="font14 reservationTime">预约时间：<span class="text-red">' + requestInfo["AppointDate"] + " " + requestInfo["AppointTime"] + '</span></div>'));
                                            typeItem.find(".weui-cell__bd").append($('<div class="font14 reservationTime">预 约 号：<span class="text-red">' + requestInfo["AppointNum"] + '</span></div>'));
                                        }
                                        typeItem.find(".sheetItem").data("info", requestInfo);
                                        typeItem.find(".sheetItem").click(function () {
                                            var id = $(this).data("info")["SheetID"];
                                            var res_id = $(this).data("info")["AppointNum"];
                                            sessionStorage.setItem("res_list_scrollTop", $(".reservationList-page").scrollTop());
                                            sessionStorage.setItem("res_list_state", select_state);
                                            location.href = navRoot + "/res/info?sheetID=" + id + "&res_id=" + res_id + "&type=" + select_state;
                                        });
                                        $("#reservation-list").append(typeItem);
                                        //} else {
                                        //   var yyTypeItem = $("#reservation-list").find(".weui-well.type" + sheetId);
                                        //   yyTypeItem.find(".examBodyPart").text(yyTypeItem.find(".examBodyPart").text() + "，" + requestInfo["ExamBodyPart"]);
                                    }
                                } else {//如果已经存在这个预约号的话
                                    var yyTypeItem = $("#reservation-list").find(".weui-well.resId" + resId.replace("@", "-"));
                                    var resSheetList = yyTypeItem.data("resSheetList");
                                    if (resSheetList.indexOf(sheetId) == "-1") {
                                        resSheetList.push(sheetId);
                                        yyTypeItem.data("resSheetList", resSheetList);
                                        var stateName = select_state == 0 ? requestInfo["FeeStateName"] : requestInfo["CurrentStateName"];
                                        var sheetItem = $('<div class="sheetItem sheetId' + sheetId + '">' +
                                            '   <div class="weui-flex">' +
                                            '       <div class="font14 weui-flex__item inOrOutTime text-disabled">' +
                                            '           申请单号：' + requestInfo["SheetID"] + '</div>' +
                                            '       <div class="resfee_state font12 font-bold text-gray">' + stateName + '</div>' +
                                            '   </div>' +
                                            '       <div class="weui-cell weui-cell_access">' +
                                            '           <div class="weui-cell__bd">' +
                                            '               <div class="weui-flex">' +
                                            '                   <div class="weui-flex__item font-bold examBodyPart"></div>' +
                                            '               </div>' +
                                            '               <div class="font14">' + requestInfo["ExamDeptName"] + '</div>' +
                                            '           </div>' +
                                            '           <div class="weui-cell__ft"/>' +
                                            '       </div>' +
                                            '       <div class="weui-flex font12 text-disabled">' +
                                            '           <div class="weui-flex__item">开单医生：' + requestInfo["BillingDoctorName"] + '</div>' +
                                            '       </div>' +
                                            '       <div class="weui-flex font12 text-disabled">' +
                                            '           <div class="weui-flex__item">开单时间：' + requestInfo["BillingDate"] + " " + requestInfo["BillingTime"] + '</div>' +
                                            '       </div>' +
                                            '   </div>');
                                        var examBodyParts = "";
                                        for (var m = 0; m < requestInfo["RequestExamDtoList"].length; m++) {
                                            if (m == 0) {
                                                examBodyParts = "[" + requestInfo["RequestExamDtoList"][0]["ExamModality"] + "]" + requestInfo["RequestExamDtoList"][0]["ExamBodyPart"] + requestInfo["RequestExamDtoList"][0]["ExamMethod"];
                                            } else {
                                                examBodyParts += "<br>" + "[" + requestInfo["RequestExamDtoList"][m]["ExamModality"] + "]" + requestInfo["RequestExamDtoList"][m]["ExamBodyPart"] + requestInfo["RequestExamDtoList"][m]["ExamMethod"];
                                            }
                                        }
                                        sheetItem.find(".examBodyPart").html(examBodyParts);
                                        sheetItem.data("info", requestInfo);
                                        sheetItem.click(function () {
                                            var id = $(this).data("info")["SheetID"];
                                            sessionStorage.setItem("res_list_scrollTop", $(".reservationList-page").scrollTop());
                                            sessionStorage.setItem("res_list_state", select_state);
                                            location.href = navRoot + "/res/info?sheetID=" + id + "&type=" + select_state;
                                        });
                                        yyTypeItem.find(".weui-well__top").show();
                                        yyTypeItem.find(".weui-well__top>.reservationTime").html($('<div class="font14">预约时间：<span class="text-red">' + requestInfo["AppointDate"] + " " + requestInfo["AppointTime"] + '</span></div>'));
                                        yyTypeItem.find(".weui-well__content .reservationTime").remove();
                                        yyTypeItem.find(".weui-well__content").addClass("onlyBottomBorder").append(sheetItem);

                                    } else {
                                        var yyTypeItem = $("#reservation-list").find(".sheetId" + sheetId);
                                        yyTypeItem.find(".examBodyPart").text(yyTypeItem.find(".examBodyPart").text() + "，" + requestInfo["ExamBodyPart"]);
                                    }
                                }
                            }
                            //如果存在两个或者以上满足条件的预约或申请单的话，则可以进行批量预约
                            if (select_state == 0 && sheetList.length >= 1) {
                                var batItem = $('<div id="onkeyBDBtn" style="margin:15px;"><div class="weui-btn weui-btn_primary">一键预约</div></div>');
                                batItem.click(function () {
                                    var params = {
                                        "sheet_list": sheetList.join(",")
                                    };
                                    $.post(navRoot + "/api/res/onekey", params, function (data) {
                                        if (data["code"] == 200) {
                                            sessionStorage.setItem("res_list_state", 1);
                                            location.href = navRoot + "/reservation/result?status=1&type=hand&id=" + params["sheet_list"];
                                        } else {
                                            location.href = navRoot + "/reservation/result?status=0&type=hand&err=" + data["errmsg"];
                                        }
                                    }, "json")
                                })

                                $("#reservation-list").append(batItem);
                            }
                            if ($("#reservation-list").children().length == 0) {
                                $("#reservation-list").append('<div class="weui-loadmore"><img src="/static/images/noData.png"><span class="weui-loadmore__tips">暂无内容，请与看诊医生确认，是否已开单。</span></div>');
                            }
                        } else {
                            $("#reservation-list").append('<div class="weui-loadmore"><img src="/static/images/noData.png"><span class="weui-loadmore__tips">暂无内容，请与看诊医生确认，是否已开单。</span></div>');
                        }
                        if (sessionStorage.getItem("res_list_scrollTop")) {
                            $(".reservationList-page").scrollTop(sessionStorage.getItem("res_list_scrollTop"));
                            sessionStorage.removeItem("res_list_scrollTop");
                        }
                    } catch (err) {
                        $.alert("数据错误:" + err);
                    }
                } else if (data["code"] == 501) {
                    $("#reservation-list").append('<div class="weui-loadmore"><img src="/static/images/noData.png"><span class="weui-loadmore__tips">暂无内容，请与看诊医生确认，是否已开单。</span></div>');
                } else {
                    $.alert(data["errmsg"]);
                }
                $.hideLoading();
            }, "json")
        }
    </script>
{% endblock %}
